<template>
	<view class="container" v-if="!show">
		<Header title="基本信息"></Header>
		
		<view class="form">
			<form @submit="formSubmit">
				<view class='user-info'>
				   <view class='list'>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>姓名</view>
							<input type='text' placeholder='请输入姓名' name='realName' :value="userInfo.realName" placeholder-class='placeholder'></input>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>性别</view>
							<view style="width: 475rpx;">
								<radio-group @change="radioChange" style="display: flex;font-size: 30rpx;">
									<view style="margin-right: 26rpx;"><radio :value="1" :checked="userInfo.gender == 1" />男</view>
									<view><radio :value="2" :checked="userInfo.gender == 2" />女</view>
								</radio-group>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>手机号</view>
							<input type='text' placeholder='请输入手机号' name='phone' :value="userInfo.phone" placeholder-class='placeholder'></input>
						</view>
						<template v-if="isUserEdit == 1">
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>学校</view>
								<input type='text' placeholder='请选择学校' readonly name="universityName" @click="show = true" :value='userInfo.universityName' placeholder-class='placeholder'></input>
							</view>
							<!-- <view class='item acea-row row-between-wrapper'>
								<view class='name'>年级</view>
								<picker @change="bindPickerChange" :value="gradeIndex" :range="gradeList" range-key="name">
									<view class="picker">{{userInfo.gradeText}}</view>
								</picker>
							</view> -->
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>入学年份</view>
								<picker @change="bindPickerYearChange" :value="yearIndex" :range="yearList">
									<view class="picker">{{userInfo.year || '请选择入学年份'}}</view>
								</picker>
							</view>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>院系</view>
								<input type='text' placeholder='请填写院系' name='major' placeholder-class='placeholder' :value='userInfo.major'></input>
							</view>
						</template>
						<template v-else>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>邮箱</view>
								<input type='text' placeholder='请填写邮箱' name='email' placeholder-class='placeholder' :value='userInfo.email'></input>
							</view>
							<view class='item acea-row row-between-wrapper'>
								<view class='name'>生日</view>
								<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
									<view class="uni-input">{{date}}</view>
								</picker>
							</view>
						</template>
					</view>
					<button class='keepBnt bg-color' formType="submit">立即保存</button>
				</view>
			</form>
		</view>
		
	</view>
	<!-- 选择学校 -->
	<School @change="selectSchool" @back="show = false" v-else></School>
</template>

<script>
	import Header from '@/subpages/components/header.vue'
	import School from '@/subpages/components/school.vue'
	import {
		getUserInfo,
		getGradelist,
		updateUserInfo
	} from '@/api/user.js'
	
	export default {
		components: {
			Header,
			School
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userInfo: {},
				gradeIndex: 0, // 年级下标索引
				gradeList: [], // 年级
				yearIndex: 0, // 入学年份
				yearList: [], // 入学年份数组
				show: false, // 学校搜索框
				isUserEdit: 0, // 是否修改用户信息
				date: currentDate // 生日
			}
		},
		onLoad() {
			this.getUserInfo().then(() => {
				this.getConfig()
				this.getYearlist()
			})
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			/**获取用户信息*/
			async getUserInfo() {
				const {data} = await getUserInfo();
				this.userInfo = data
				this.userInfo.gradeText = data.gradeText || '请选择年级'
			},
			// 获取年级
			getConfig() {
				getGradelist().then(data => {
					if (data.code === 200) {
						this.isUserEdit = data.data.isOpenEdit
					}
				})
			},
			// 选择年级
			bindPickerChange(e){
				this.gradeIndex = e.detail.value
				this.userInfo.gradeText = this.gradeList[this.gradeIndex].name
				this.userInfo.grade = this.gradeList[this.gradeIndex].value
			},
			// 获取入学年份
			getYearlist() {
				var year= new Date().getFullYear();
				var arr = []
				for(var i = year; i > year - 10; i--){
					arr.push(i)
				}
				this.yearList = arr
				console.log(arr);
			},
			// 选择入学年份
			bindPickerYearChange(e){
				this.yearIndex = e.detail.value
				this.userInfo.year = this.yearList[this.yearIndex]
			},
			// 选择学校
			selectSchool(item){
				this.userInfo.universityId = item.universityId
				this.userInfo.universityName = item.universityName
				this.show = false
			},
			// 生日
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 性别
			radioChange(e) {
				this.userInfo.gender = +e.detail.value
			},
			// 编辑用户信息
			formSubmit(e){
				var that = this, value = e.detail.value;
				value.universityId = this.userInfo.universityId || ''
				// value.grade = this.userInfo.grade || ''
				value.year = this.userInfo.year
				value.gender = this.userInfo.gender || 1
				console.log(value);
				updateUserInfo(value).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none',
					});
					if (res.code === 200) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>	
	.user-info .list{background-color:#fff;}
	.user-info .list .item{padding:0 30rpx;height:90rpx;border-top:1rpx solid #eee;}
	.user-info .list .item .name{width:195rpx;font-size:30rpx;color:#333;}
	.user-info .list .item input{width:475rpx;font-size:30rpx;}
	.user-info .list .item .placeholder{color:#ccc;}
	.user-info .list .item picker{width:475rpx;}
	.user-info .list .item picker .picker{width:410rpx;font-size:30rpx;}
	.user-info .list .item picker .iconfont{font-size:43rpx;}
	.user-info .default{padding:0 30rpx;height:90rpx;background-color:#fff;margin-top:23rpx;}
	.user-info .default checkbox{margin-right:15rpx;}
	.user-info .keepBnt{width:690rpx;height:86rpx;border-radius:50rpx;text-align:center;line-height:86rpx;margin:50rpx auto;font-size:32rpx;color:#fff;}
	.user-info .wechatAddress{width:690rpx;height:86rpx;border-radius:50rpx;text-align:center;line-height:86rpx;margin:0 auto;font-size:32rpx;color:#fe960f;border:1px solid #fe960f;}
	.bg-color{background-color:#e93323!important;}
	radio{
		margin-right: 8rpx;
	}
</style>